Hace unos días me preguntaban sobre una forma de dar estilo a caracteres especiales más conocidos como Unicode y es muy sencillo si utilizamos la etiqueta span de la que ya hablamos en otra ocasión.

Este carácter ► para mostrarlo tendríamos que escribir lo siguiente ►
Si utilizamos la etiqueta span de esta forma:

<span style="vertical-align: middle; color:#990000; font-size:20px;">&#9658;</span>

  Tendríamos este resultado

Es tan sencillo como pensar el color y tamaño que deseamos darle, añadir los estilos y antes del cierre de la etiqueta span añadir el carácter que vamos a utilizar.



     ®


MexaaC

Impresionante lo que se puede hacer con solo código sin necesidad de subir imágenes y alentar la carga de una página web.

Responder
Anónimo

Gem@ en esta recta final te deseamos suerte en el concurso 20blogs y te apoyamos desde nuestra Web.

Enlace


Saludos!!!

Responder
Gem@

:: N.G. - C.W. lo que es impresionante es la etiqueta span al contrario que ocurre con el div no añade márgenes o espacios muertos, es una etiqueta a la que se puede sacar mucha utilidad

:: descarga-gratis-libros.com muchas gracias, os estoy muy agradecida :)

Responder
Marga

Hola Gema, me alegra saludarte de nuevo, hace tiempo que no lo hacía.
Queria preguntarte una cosita, estoy "jugando" con este "truqui" y por más que le cambio el tamaño no consigo que el caracter me salga más grande ... que torpona soy ....

Un beso
Marga

Responder
Gem@

:: Dónde lo tienes añadido Marga? si lo veo será más sencillo :)

Responder
Marga

:$ Lo siento Gema, no había caido ...
Lo he puesto en la última entrada que tengo editada, "La Trenza de Hojaldre"

Gracias!!!
Marga

Responder
Cárpena Creativos

Gemita... algun link con el detalle de los caracteres (codigo y su respectiva imagen)??????

Gracias!!

Responder
Gem@

:: Marga eso que hicist eno está bien mandarme a ver esa trenza de hojaldre a esta hora y yo sin merendar jajajajaja
Verás hay una comilla que se ha colado dónde no debía, ha sido error mío, lo tienes así:
<span style="vertical-align: middle; color:#000000;" font-size:150px;>&#10047;</span>

Esa comilla doble que hay después del color debe ir al final:
<span style="vertical-align: middle; color:#000000; font-size:150px;">&#10047;</span>
Lamento mucho que perdieras en tiempo por mi error :(

:: Jaime en la misma entrada donde dice Unicode ;)

Responder
Felipe Calvo Cepeda

Jejeje... genial Gema.

Nunca se me habría ocurrido jugar con los colores y la fuente... me falta explotar mi creatividad :D

En Vagabundia JMiur hizo una buena recopilación y muchos ni los conocia... y si me permites Gema... le dejo a Jaime los enlaces:
Parte 1
Parte 2

Un abrazo.!

Responder
Gem@

:: La imaginación es traviesa Felipe aparece cuando menos la esperamos :)
El sitio al que derivo a Jaime y que hay en la entrada es ese mismo de Vagabundia :D

Responder
Marga

Ya tá Gema !!!!!!!!!! :)
Hay que ver lo que hacen unas "comillas" jajaja

Gracias a tí por tu tiempo para los novatillos.

Besos,
Marga

Responder
Cárpena Creativos

Siempre muy atenta Gem@, y ahora un amigo mas, gracias Felipe, un abrazo desde Perú :D

Responder
Unknown

No sabía cómo agrandar los caracteres, lo hacía con grande, más grande jajaja

Menos mal que estás ahí con los truquitos!

Besitos Juli :P

Responder
Cocina

Hola GEM@!
muy interesante y util este truco,queria preguntarte porque no me sale en la pagina principal,solo en las entradas individuales me explico?
muchas gracias!

Responder
Gem@

:: Estupendo Marga!!

:: Suerte Jaime ;)

:: Me encantan los truquitos Graciela y si funcionan más todavía :D

:: Te explicas divinamente Cocofansclub y no tengo respuesta porque debe salir en cualquier entrada que lo añadas :O
Si quieres prueba añadiendo los estilos en la plantilla de esta forma:
.unicode{
color: #990000;
vertical-align: middle;
font-size: 26px;
}

y en la entrada:
<span class="unicode">Aquí añadimos el carácter</span>

Responder
Cocina

Perdon Gem@!!!pero el error fue mio lo habia puesto abajo de todo de la entrada,y no recorde que tengo el leer mas!!ahora si aparece en la entrada principal!!
muchisimas gracias y disculpas!!

Responder
Gem@

:: No te preocupes Cocofansclub, es un detalle que vengas a contarlo :D

Responder
Karla Castañeda

Excelente Gema! y si les agregas sombra parecera que los sacaste de photoshop jaja, yo usaré unos de números que encontré aquí:
http://www.alanwood.net/unicode/dingbats.html
ideales para los pasos :D

Responder
Gem@

:: Genial idea Karla, he visto que eres una enamorada de las sombras igual que yo :D

Responder
Karla Castañeda

Si, veo sombras por todos lados Gemita ♫ y no estoy loca, no estoy loca solo estoy :D esesperada

Responder
Gem@

:: Habrá que mirase eso Karla así se empieza con la adicción al CSS :)

Responder
Karla Castañeda

jaja, te imaginas Gema, ser tan adicta al CSS que se quiera hacer el ♥ con el:

body{
background:#FB0101 url(bed.gif);
background-repeat: repeat !important;
text-align: center;
}

.post{
margin: 0px;
display: inline;
}
.post-body img{
vertical align: middle;
float:none;
}


:D

Responder
Gem@

:: Qué original Karla !!! :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top